<template>
	<view class="uni_box home">
		<navbar title='代理详情'>
		</navbar>
		<view class="content">
			<view class="weiitem">
				<view class="items">
					<text class="wei">委托日期: {{ timestampToTime(info.created_at) }}</text>
				</view>
				<view class="items">
					<text class="wei">委托人：{{ info.name }}</text>
				</view>
				<view class="items">
					<text class="wei">联系方式：{{ info.phone }}</text>
				</view>

			</view>
			<view class="weiitem">
				<view class="items">
					<text class="wei">受理状态： <text class="zt">{{ info.status_name }}</text> </text>
				</view>
				<!-- <view class="items">
					<text class="wei">所在地：{{ info.province+info.city+info.area }}</text>
				</view>
				<view class="items">
					<text class="wei">纠纷金额：{{info.dispute_money}}</text>
				</view>
				<view class="items">
					<text class="wei">纠纷描述：{{info.describe}}</text>
				</view> -->
				<view class="items" v-if="info.case_no">
					<text class="wei">备案号：：{{ info.case_no }}</text>
				</view>
				<view class="items" v-if="info.seized">
					<text class="wei">受理人：{{ info.seized.name }}</text>
				</view>
				
				<view class="items" v-if="info.seized">
					<text class="wei">联系方式：{{ info.seized.phone }}</text>
					<view class="copy" @click="copy(info.seized.phone)">复制</view>
				</view>

			</view>
			<view class="weiitem">
				<view class="miao">
					<text class="anmiao">您的案件已受理，我们将有法律顾问在24小时内联系您，您也可以手动添加顾问，提交案号获得法律服务</text>
				</view>
				<view class="maview" v-if="info.seized">
					<image
					    class="matu"
						:src="info.seized.wechat_code"
						mode=""
						@click="yulan"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { h } from 'vue';

	export default {
		data() {
			return {
				id:'',
				info:{}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail()
		},
		onShow() {
		},
		methods: {
			async getDetail(){
				let res = await this.$u.api.zhaicaseinfo({
					id:this.id
				});
				this.info = res.info
			},
			timestampToTime(timestamp) {
				// const date = new Date(Number(timestamp))
				// const Y = date.getFullYear() + '/'
				// const M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '/'
				// const D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()) + ' '
				// const h = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':'
				// const m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':'
				// const s = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds())
				// return Y+M+D 
				// const timestamp = 1609459200000; // 时间戳
				const date = new Date(timestamp);
				const year = date.getFullYear();
				var month = date.getMonth() + 1; //月份是从0开始的，所以要加1
				var day = date.getDate();
				if(month<9){
					month = '0'+month
				}
				if(day<9){
					day = '0'+day
				}
				const result = year + '-' + month + '-' + day;
				// console.log(result); // 输出：2021-01-01
				return result

			},
			yulan(){
				let shuzu = []
				shuzu.push(this.info.seized.wechat_code)
				uni.previewImage({
					current: this.info.seized.wechat_code, // 当前显示图片的 http 链接
					urls: shuzu // 需要预览的图片 http 链接列表
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.content{
		background-color: #F5F5F5;
		min-height: 100vh;
		padding: 30rpx;
		.weiitem{
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx 30rpx 10rpx;
			margin-bottom: 20rpx;
			.items{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 18rpx;
				.wei{
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #111111;
				}
				.zt{
					color: #3E65E5;
				}
				.copy{
					width: 100rpx;
					height: 44rpx;
					background: rgba(62,101,229,0.1);
					border-radius: 5rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #3E65E5;
				}
			}
			.miao{
				padding: 15rpx 20rpx;
				background: rgba(62,101,229,0.1);
				border-radius: 5rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #3E65E5;
				margin-bottom: 30rpx;
			}
			.maview{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 30rpx;
				.matu{
					width: 300rpx;
					height: 300rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
